import {useDeviceInfo} from './DeviceInfoContext';
import {ImageBackground, View, Pressable} from 'react-native';
import {Icon, useAppTheme, Text, Tag} from 'tsun-smart-ui';
import {useTranslation} from 'react-i18next';
import FastImage from 'react-native-fast-image';
import {navigationRef} from '@/navigation';
import {
  DeviceStatus,
  DeviceState as DeviceStateEnum,
  DeviceStatusType,
} from '@/enums/devices';
import Signal from '../Signal/4GSignal';
import WifiSignal from '../Signal/WifiSignal';
import {Slot, SlotChildren, useSlot} from '@beqa/react-slots';
import StringUtils from '@/utils/StringUtils';
type ToSlotUnion<T extends Record<string, object>> = {
  [K in keyof T]: Slot<K extends string ? K : never, T[K]>;
}[keyof T];

type SlotProps = {
  soc: {
    soc: string;
  };
  workTime: {
    workTime: string;
  };
  powerState: {
    powerState: string;
  };
};
type Props = {
  children?: SlotChildren<ToSlotUnion<SlotProps>>;
};

const DeviceState = ({children}: Props) => {
  const deviceData = useDeviceInfo();
  const {
    sn,
    state: {isConnect, lastTime, workTime},
    deviceImage: image,
    singleStrength,
    devStatus,
  } = deviceData;
  const theme = useAppTheme();
  const {t} = useTranslation();
  const {slot} = useSlot(children);
  const soc = '80%';
  const powerState = '购电';
  return (
    <ImageBackground
      className="h-[240] rounded-lg"
      imageStyle={{
        borderRadius: 16,
      }}
      source={
        theme.isDark
          ? require('@/assets/imgs/dark-status.png')
          : require('@/assets/imgs/status.png')
      }>
      <View className=" flex-row px-5 flex-between mt-5 ">
        <Text variant="bodyStrong">{sn}</Text>
        <Tag type={DeviceStatusType[devStatus ?? 'offline']}>
          {t(DeviceStateEnum[DeviceStatus[devStatus ?? 'offline']])}
        </Tag>
      </View>
      <View className="flex-row px-5 mt-5">
        <FastImage
          className=" size-[100] rounded-lg mr-5"
          style={{
            backgroundColor: theme.colors?.background?.disabled,
          }}
          source={
            image
              ? {
                  uri: StringUtils.toImageUri(image),
                }
              : require('@/assets/imgs/MP3000-1.png')
          }
        />
        <View className=" justify-center gap-y-2 flex-1">
          <slot.soc soc={soc}></slot.soc>
          <Text
            style={{
              color: theme.colors?.neutral?.primary,
            }}>
            {t('job.previousUpdate', {defaultValue: '上次更新'}) + ': '}
            <Text>{lastTime}</Text>
          </Text>
          <slot.workTime workTime={workTime}></slot.workTime>
          <slot.powerState powerState={powerState}></slot.powerState>
          <View className="flex-row items-center">
            <Text
              style={{
                color: theme.colors?.neutral?.primary,
              }}>
              {t('job.communicationStatus', {defaultValue: '通信状态'}) + ': '}
            </Text>
            <Signal signal={isConnect ? singleStrength ?? 0 : 0}></Signal>
          </View>
        </View>
      </View>
      <Pressable
        onPress={() => {
          navigationRef.navigate('DeviceControl', deviceData);
        }}
        style={{
          backgroundColor: theme.colors?.neutral?.white,
        }}
        className="flex-row flex-between px-5  mt-5 h-[45] rounded-lg">
        <View className="flex-row items-center">
          <Text variant="bodyStrong">{t('device.equipment_control')}</Text>
          <Text
            className="ml-4"
            variant="caption"
            style={{
              color: theme.colors?.neutral?.primary,
            }}>
            {`${t('job.signalStrength')}: `}
          </Text>
          <Text>{`${
            isConnect ? (singleStrength ? singleStrength + '%' : '--') : '--'
          }`}</Text>
        </View>
        <Icon
          name="right"
          size={10}
          color={theme.colors?.neutral?.primary}></Icon>
      </Pressable>
    </ImageBackground>
  );
};

export default DeviceState;
